<!--
 * @Author: Xujianchen
 * @Date: 2025-08-08 16:12:14
 * @LastEditors: Xujianchen
 * @LastEditTime: 2025-08-08 16:32:14
 * @Description: 订单详情
-->
<template>
  <view class="detail">
    <view class="card" style="margin-top: 32rpx;">
      <view class="card-item" style="color: #999; font-size: 28rpx;">订单总额</view>
      <view class="card-item" style="font-size: 44rpx; font-weight: bold;">¥{{ orderInfo.planMarketPrice }}</view>
    </view>
    <view class="card">
      <view class="card-item">
        <text>商品名称</text>
        <text>{{ orderInfo.planTitle }}</text>
      </view>
      <view class="card-item">
        <text>订单编号</text>
        <text>{{ orderInfo.orderNo }}</text>
      </view>
      <view class="card-item">
        <text>创建时间</text>
        <text>{{ orderInfo.createdAt }}</text>
      </view>
      <view class="card-item">
        <text>使用时长</text>
        <text>{{ orderInfo.planMinute }}分钟</text>
      </view>
      <view class="card-item">
        <text>订单状态</text>
        <text>{{ ORDER_STATUS_TEXT[orderInfo.status] }}</text>
      </view>
    </view>
    <view class="card">
      <view class="card-item">
        <text>支付方式</text>
        <text>{{ payType[orderInfo.payType] || '未知' }}</text>
      </view>
    </view>

    <view class="btn" style="margin-bottom: 24rpx;">归还设备</view>
    <view class="btn">查看最近归还点</view>
  </view>
</template>

<script>
import { getMealOrderDetail } from '@/api/meal'
import { ORDER_STATUS_TEXT } from '@/const/order'

export default {
  data() {
    return {
      orderInfo: {},
      ORDER_STATUS_TEXT,
      payType: {
        2: '微信支付',
        3: '支付宝支付'
      }
    }
  },
  async onLoad(options) {
    const res = await getMealOrderDetail(options.no)
    console.log(res);
    this.orderInfo = res.data
  }
}
</script>

<style scoped lang="scss">
.detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  margin: 0 24rpx;
  width: calc(100% - 60rpx - 48rpx);
  margin-bottom: 32rpx;
  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    &:last-child {
      margin-bottom: 0;
    }
    text {
      font-size: 28rpx;
      &:first-child {
        color: #333;
      }
      &:last-child {
        color: #999;
      }
    }
  }
}

.btn {
  width: 300rpx;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  border-radius: 12rpx;
  background-color: #2c8dfb;
}
</style>